<div class="step fax-step panel panel-default">
	<div class="panel-heading">
			<step-heading></step-heading>	</div>

	<div class="panel-body" ng-hide='step.iface.isCollapsed'>
		<div class='row'>
			<div lookup-context class='col-md-12'>
				<div class="form-group">
					<label class="help-tooltip" tooltip="{{'faxStepFaxLabelPopover' | translate}}" tooltip-popup-delay="1000" tooltip-trigger="mouseenter">{{'faxStepFaxLabel' | translate}}</label>
					<textarea ng-model='step.text' lookup-target class="form-control"></textarea>	
				</div>
				<div class="form-group pull-right">
					<variable-lookup variable="step.text" view="standalone"></variable-lookup>
				</div>
			</div>
		</div>
		<div class="row">
			<div class='col-md-4'>
				<div lookup-context class="input-group form-group input-group-sm">
					<span class="input-group-addon">{{'faxStepToLabel' | translate}}<!-- &nbsp; <i class="fa fa-info-circle rvd-clickable" popover='The phone number of the recipient. When sending a fax during an incoming call, it defaults to the caller. When sending an fax during an outgoing call, it defaults to the called party.' popover-placement='top'></i> --></span>
					<input ng-model='step.to' lookup-target auto-clear  type='text' name='to'  class="form-control"></input>
					<variable-lookup variable="step.to" view="input-group"></variable-lookup>
				</div>
				<div lookup-context class="input-group form-group input-group-sm">
					<span class="input-group-addon">{{'faxStepFromLabel' | translate}}<!-- &nbsp; <i class="fa fa-info-circle rvd-clickable" popover='The phone number of the sender. When sending a fax during an incoming call, it defaults to the calling party. When sending a fax during an outgoing call, it defaults to the called party' popover-placement='top'></i>--></span>
					<input ng-model='step.from' lookup-target auto-clear type='text' name='from'  class="form-control"></input>
					<variable-lookup variable="step.from" view="input-group"></variable-lookup>
				</div>			
			</div>
			<div class='col-md-8'>
					<!-- <span class="help-block">After processing this step</span> -->
					<div class="input-group form-group input-group-sm">
						<span class="input-group-addon help-tooltip" tooltip-trigger='mouseenter' tooltip-popup-delay='1000' tooltip="{{'faxStepContinueTooltip' | translate}}">{{'faxStepContinueLabel' | translate}}</span>
						<select sync-model name='next' ng-model='step.next' ng-options='target.name as target.label for target in getAllTargets()' class="form-control">
							<option value=""></option>
						</select>
						<!-- 
						<span class='input-group-addon'>method</span>
						<select name="method" ng-model='step.method'  class="form-control">
							<option value=""></option>
							<option value="GET">GET</option>
							<option value="POST">POST</option>
						</select>
						 -->
					</div>
					<div class="validation-error" ng-show="form.next.$invalid">{{'faxStepChooseTargetLabel' | translate}}</div>
					

					<div class="input-group form-group input-group-sm">
						<span class="input-group-addon help-tooltip" tooltip-trigger='mouseenter' tooltip-popup-delay='1000' tooltip="{{'faxStepStatusTooltip' | translate}}">{{'faxStepStatusLabel' | translate}}</span>
						<input type='text' name='statusCallback' auto-clear ng-model='step.statusCallback' class="form-control" placeholder="{{'faxStepStatusPlaceholder' | translate}}"></input>
					</div>

		</div>
	</div>
</div>
